<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学习bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <!-- navbar-expand-lg 超过lg后才显示 -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <div class="container">
      <a href="" class="navbar-brand">我在B站万编程</a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navmenu">
        <!-- margin start == margin left -->
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <div class="nav-link">前端知识</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">后端知识</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">数据库</div>
          </li>
        </ul>

      </div>
    </div>
  </nav>
              <!-- p == padding; -->
  <section class="p-5 bg-dark text-light text-center text-sm-start"> 
    <div class="container" >

      <!-- d-flex == display:flex -->
      <div class="d-flex">
        <div>
          <h1>称为一个<span class="text-warning">前端工程师</span></h1>
          <!-- my == margin-top & margin-bottom -->
          <p class="my-4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis deleniti consectetur eveniet fugit similique deserunt explicabo numquam odit, ipsum illum beatae, laborum quia facere eligendi nesciunt iusto, voluptatem magni nam.</p>
          <button class="btn btn-primary btn-lg" >开启编程之旅</button>
        </div>
        <img src="./img/showcase.svg" alt="showcase" 
        class="w-50 d-none d-md-block"> 
        <!-- 
          w-50 == width: 50%; 
          d-none == display: none;
        -->
      </div>
    </div>
  </section>

  <section class="p-5 bg-primary text-light">
    <div class="container">
      <div class="d-md-flex justify-content-center align-items-center ">
        <h3 class="m-4">现在注册账号开始编程之旅</h3>
        <div class="input-group news-input" >
          <input type="text" class="form-control" placeholder="请输入你的邮箱">
          <button class="btn btn-dark btn-lg">注册</button>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5">
  
    <div class="container">
      <div class="row">
        <div class="col-md g-4">
          <div class="card bg-dark text-light">
            <div class="card-body text-center">
              <div class="card-title ">
                前端
              </div>
              <div class="card-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, iste. Voluptates architecto praesentium 
              </div>
              <a href="" class="btn btn-primary mt-2">学习前端</a>
            </div>
          </div>
        </div>
        <div class="col-md g-4">
          <div class="card bg-secondary text-center text-light">
            <div class="card-body">
              <div class="card-title">
                后端知识
              </div>
              <div class="card-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, iste. Voluptates architecto praesentium 
              </div>
              <a href="" class="btn btn-dark mt-2">学习前端</a>
            </div>
          </div>
        </div>

        <div class="col-md g-4">
          <div class="card bg-dark text-center text-light">
            <div class="card-body">
              <div class="card-title">
                后端知识
              </div>
              <div class="card-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, iste. Voluptates architecto praesentium 
              </div>
              <a href="" class="btn btn-primary mt-2" >学习前端</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5 ">
    <div class="container">
     <div class="row align-items-center justify-content-center">
       <div class="col-md">
         <img src="./img/1.svg" alt="1" class="img-fluid">
       </div>
       <div class="col-md p-5">
         <h2>课程介绍</h2>
         <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus architecto numquam  !</p>
         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus architecto numquamLorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut facere accusantium harum! Beatae, cumque nostrum inventore quia voluptatum labore .</p>
         <a href="" class="btn btn-light">查看更多</a>
       </div>
     </div>
    </div>
  </section>

  <section class="p-5 bg-dark">
    <div class="container  text-light">
      <div class="row align-items-center justify-content-center">
        <div class="col-md">
          <h2>课程介绍</h2>
          <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus architecto numquam  !</p>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus architecto numquamLorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut facere accusantium harum! Beatae, cumque nostrum inventore quia voluptatum labore .</p>
          <a href="" class="btn btn-light">查看更多</a>
        </div>
        <div class="col-md">
          <img src="./img/2.svg" alt="2" class="img-fluid">
        </div>
      </div>
    </div>

  </section>


  <section class="p-5">
    <div class="cantainer">
      <h2 class="text-center">常见问题</h2>
      <div class="accordion accordion-flush" id="accordionFlushExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
              Accordion Item #1
            </button>
          </h2>
          <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
              Accordion Item #2
            </button>
          </h2>
          <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
              Accordion Item #3
            </button>
          </h2>
          <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5 bg-primary ">
    <div class="container">
      <h2 class="text-center text-light">任务介绍</h2>
      <p class="text-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, nostrum odit optio accusantium beatae maxime dignissimos qui atque in dolor?</p>
      <div class="row">
        <!-- col-md-6=='屏幕尺寸大于md,该元素占6格' 
            col-lg-3=='屏幕尺寸大于md,该元素占3格'
        -->
        <div class="mb-3 col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="./img/02-man.jpeg" alt="" class="mb-3 rounded-circle">
              <h3 class="card-title">张三</h3>
              <p class="card-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ratione.
              </p>
            </div>
          </div>
        </div>
        <div class="mb-3 col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="./img/03-man.jpeg" alt="" class="mb-3 rounded-circle">
              <h3 class="card-title">张三</h3>
              <p class="card-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ratione.
              </p>
            </div>
          </div>
        </div>
        <div class="mb-3 col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="./img/04-man.jpeg" alt="" class="mb-3 rounded-circle">
              <h3 class="card-title">张三</h3>
              <p class="card-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ratione.
              </p>
            </div>
          </div>
        </div>
        <div class="mb-3 col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="./img/01-man.jpeg" alt="" class="mb-3 rounded-circle">
              <h3 class="card-title">张三</h3>
              <p class="card-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ratione.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>


  <section class="p-5 ">
    <div class="container">
      <h2 class="text-center mb-4">联系我们</h2>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">电话: 15811305718</li>
        <li class="list-group-item">邮箱: 985186708@qq.com</li>
        <li class="list-group-item">地址: 北京市朝阳区</li>
      </ul>
    </div>
  </section>

  <section class="p-5 bg-dark text-white text-center">
    <div class="container">
      <p class="lead">Copyright &copy; 2021 我在练习bootstrap!</p>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
</body>

</html>